<template>
  <!--借款详情-->
    <div class="LoanDetails"  v-show="isShowHtml">
      <div class="DetailTop">
        <h2>信息</h2>
        <ul>
          <li>
            <i>产品名称</i><span>{{loanInfo.data.products_name}}</span>
          </li>
            <li>
              <i>贷款金额</i><span>{{loanInfo.data.amount}}</span>
            </li>
          <li>
            <i>分期期数</i><span>{{loanInfo.data.periods}}</span>
          </li>
          <li>
            <i>贷款利率</i><span>{{loanInfo.data.rate}}%</span>
          </li>
          <li>
            <i>合同</i><b>《贷款合同》《抵押合同》</b>
          </li>
          <li>
            <i>申请进度</i><span>{{ LoanStatus[loanInfo.data.status]}}</span>
          </li>
          <li>
            <i>备注</i><span>{{loanInfo.data.remarks}}</span>
          </li>
        </ul>
      </div>
      <div class="DetailUpload" v-if="this.addType!=3 && status!=0">
        <h2>后续资料</h2>
        <ul>
          <li>
          <span>1,</span>
          <p>交强险、商业险保单原件，复印件留档</p>
          <div>
            <b>{{uploadList.includes('a1') ? "已上传":""}}</b>
            <i>
              <Qiniu :disabled="disabled" className="upload1" isShort="true" @upload="upload" prop="a1"></Qiniu>
            </i>
          </div>
        </li>
          <li>
            <span>2,</span>
            <p>借款合同、租赁合同、抵押合同复印件</p>
            <div>
              <b>{{uploadList.includes('a2') ? "已上传":""}}</b>
              <i>
                <Qiniu :disabled="disabled" className="upload2" isShort="true" @upload="upload" prop="a2"></Qiniu>
              </i>

            </div>
          </li>
          <li>
            <span>3,</span>
            <p>车辆行驶证</p>
            <div>
              <b>{{uploadList.includes('a3') ? "已上传":""}}</b>
              <i>
                <Qiniu :disabled="disabled" className="upload3" isShort="true" @upload="upload" prop="a3"></Qiniu>
              </i>

            </div>
          </li>
          <li>
            <span>4,</span>
            <p>车险系统车身价截图</p>
            <div>
              <b>{{uploadList.includes('a4') ? "已上传":""}}</b>
              <i>
                <Qiniu :disabled="disabled" className="upload4" isShort="true" @upload="upload" prop="a4"></Qiniu>
              </i>

            </div>
          </li>
          <li>
            <span>5,</span>
            <p>三连星GPS安装确认单</p>
            <div>
              <b>{{uploadList.includes('a5') ? "已上传":""}}</b>
              <i>
                <Qiniu :disabled="disabled" className="upload5" isShort="true" @upload="upload" prop="a5"></Qiniu>
              </i>

            </div>
          </li>
          <li>
            <span>6,</span>
            <p>自用汽车消费贷款保证保险投保人和担保人承诺及授权书原件</p>
            <div>
              <b>{{uploadList.includes('a6') ? "已上传":""}}</b>
              <i>
                <Qiniu :disabled="disabled" className="upload6" isShort="true" @upload="upload" prop="a6"></Qiniu>
              </i>

            </div>
          </li>
          <li>
            <span>7,</span>
            <p>自用汽车消费贷款保证保险投保人和担保人承诺及授权书原件</p>
            <div>
              <b>{{uploadList.includes('a7') ? "已上传":""}}</b>
              <i>
                <Qiniu :disabled="disabled" className="upload7" isShort="true" @upload="upload" prop="a7"></Qiniu>
              </i>

            </div>
          </li>
          <li>
            <span>8,</span>
            <p>自用汽车消费贷款保证保险担保书原件</p>
            <div>
              <b>{{uploadList.includes('a8') ? "已上传":""}}</b>
              <i>
                <Qiniu :disabled="disabled" className="upload8" isShort="true" @upload="upload" prop="a8"></Qiniu>
              </i>

            </div>
          </li>
          <li>
            <span>9,</span>
            <p>声明</p>
            <div>
              <b>{{uploadList.includes('a9') ? "已上传":""}}</b>
              <i>
                <Qiniu :disabled="disabled" className="upload9" isShort="true" @upload="upload" prop="a9"></Qiniu>
              </i>

            </div>
          </li>
          <li>
            <span>10,</span>
            <p>车辆处置授权书原件</p>
            <div>
              <b>{{uploadList.includes('a10') ? "已上传":""}}</b>
              <i>
                <Qiniu :disabled="disabled" className="upload10" isShort="true" @upload="upload" prop="a10"></Qiniu>
              </i>

            </div>
          </li>
          <li>
            <span>11,</span>
            <p>自用汽车消费贷款放款账户确认函</p>
            <div>
              <b>{{uploadList.includes('a11') ? "已上传":""}}</b>
              <i>
                <Qiniu :disabled="disabled" className="upload11" isShort="true" @upload="upload" prop="a11"></Qiniu>
              </i>

            </div>
          </li>
        </ul>
      </div>
      <div v-if="this.addType!=3  && status!=0">
        <h2>补充资料</h2>
        <div  class="addFile">
          <span>点击上传</span>
          <Qiniu className="upload" showProgress="true" @upload="upload2"></Qiniu>
        </div>
      </div>
      <button class="btn"  v-if="status==0" @click="goFile">去上传资料</button>

      <button v-if="status!=0" class="btn" @click="goBack">保存</button>
    </div>
</template>

<script>
  import Qiniu from './../common/Qiniu';
    export default {
        name: "LoanDetails",
      data(){
          return{
            isShowHtml:false,
            uploadList:[],
            disabled:false,
            addType:'',
            loanInfo:{
              data:[],
            },
            LoanStatus:{
              '0':'未完成',
              '1':'等待初审',
              '2':'等待复审',
              '3':'等待面签',
              '4':'等待放款' ,
              '5':'放款',
              '6':'借款失败'
            },
            uploadIndex:'a12',
            status:0
          }
      },
      created(){
        this.$indicator.open()
      },
      mounted(){
        let params = this.$route.query;
        this.loan_id = params.id;
        this.addType=params.type;
        this.status = params.status || 0;
        this.$api.getUserLoanInfo({id: params.id}).then((res) => {
          this.loanInfo.data = res.data;
          this.$indicator.close();
          this.isShowHtml = true;
        }).catch(()=>{
          this.$indicator.close();
          this.isShowHtml = true;
        });

        if (this.addType!=3) {
          this.$api.getAddFile({id: params.id}).then((res)=>{
            this.uploadList = res.data;
            for(let i=0;i<res.data.length;i++){
              if(typeof res.data[i] == 'number')continue;
              if(Number(res.data[i].slice(1))>=Number(this.uploadIndex.slice(1))){
                this.uploadIndex = 'a'+(Number(res.data[i].slice(1))+1)
              }
            }
          })
        }

      },
      components: {
        Qiniu
      },
      methods: {
        goFile(){
          if(this.addType ==1){
            this.$router.push({path:'carupload',query:{loanId:this.loan_id,type:'add'}})
          }else {
            this.$toast('请去PC端上传资料');
          }
        },
        goBack(){
          this.$router.go(-1);
        },
        upload(value, name,type) {
          let params = {};
          params.path = value;
          params.type = name;
          params.loan_id = this.loan_id;
          this.$api.uploadAddFile(params).then((res)=>{
            if(type){
              this.uploadIndex = 'a'+(Number(this.uploadIndex.slice(1))+1)
            }
           this.$toast('上传成功');
            this.uploadList.push(name)
          }).catch((err)=>{
            if( err.response.data.status_code==404){
              this.$toast('请先上传贷款资料');
              this.disabled = true;
              let path;
              switch (this.loanInfo.file_type) {
                case 1:path = 'carupload';break;
                case 2:path = 'operationUpload';break;
                case 3:path = 'operationUpload';break;
              }
              this.$route.push({path:path,query:{id:this.loanInfo.id}})
            }else {
              this.$toast('上传失败');
            }
          })
        },
        upload2(value){
          this.upload(value,this.uploadIndex,true);
          //上传所补充资料
        },
      }
    }
</script>

<style lang="scss" scoped>
 .LoanDetails{
   width: 100%;
   height: 100%;
   h2{
     font-size: 4vw;
     font-weight: 400;
     color: #999;
     line-height: 4vw;
     padding: 4.8vw 4vw;
   }
   .btn{
     margin:30px;
   }
   .addFile{
     width: 200px;
     height:60px;
     display: block;
     background: red;
     color: #fff;
    text-align: center;
     line-height: 60px;
     border-radius: 2px;
     margin: 0 0 100px 30px;
     position: relative;
     &:active{
       opacity: 0.7;
     }
     /deep/ .qiniu{
       left: 0;
       top:0;
       width: 100%;
       height: 100%;
       position: absolute;
     }
     /deep/ .qiniu label {
       display: block;
     }
     }
   .DetailTop{
      ul{
        padding: 0 30px;
        background: #fff;
        li{
          min-height: 100px;
          font-size: 30px;
          font-weight: 400;
          color: rgba(51, 51, 51, 1);
          border-bottom: 1px solid #F2F2F2;
          font-family:SourceHanSansCN-Regular;
          overflow: hidden;
          line-height: 100px;
          i{
            color:rgba(51,51,51,1);
          }
          span{
            float: right;
            color:rgba(153,153,153,1);
          }
          b{
            float: right;
            color:rgba(231,31,24,1);
          }
        }
        li:nth-last-child(2){
          span{
            color:#F2AB30;
          }
        }
        li:last-child{
          /*min-height: 100px;*/
          span{

            display: inline-block;
            min-width: 100px;
            /*min-height: 100px;*/
            vertical-align: center;margin-top: 15px;
            line-height: 60px;
            text-indent: 10vw;
            /*padding-bottom: 30px;*/
          }
        }

      }
   }
   .DetailUpload{
     ul {
       padding: 0 30px;
       background: #fff;

       li {
         min-height: 100px;
         font-size: 30px;
         font-weight: 400;
         color: rgba(51, 51, 51, 1);
         line-height: 32px;
         border-bottom: 1px solid #F2F2F2;
         overflow: hidden;

         > span {
           float: left;
           margin: 34px 0 0 0;
         }

         p {
           line-height: 46px;
           width: 494px;
           float: left;
           margin: 27px 0;

           > span {
             color: #999999;
           }
         }

         > div {
           float: right;
           margin: 30px 0 0 0;

           b {
             font-size: 22px;
             font-weight: 400;
             color: rgba(153, 153, 153, 1);
             line-height: 40px;
             margin: 0 10px 0 0;
           }

           i {
             float: right;
             width: 40px;
             height: 40px;
             background: url("./../../assets/img/personal/bottom.png");
             background-size: 100% 100%;
           }
         }
       }
     }
   }
 }
 /deep/ .qiniu {
   width: 100%;
   height: 100%;
 }

 /deep/ .qiniu label {
   width: 100%;
   height: 100%;
   font-size: 0;
   background: transparent;
 }
</style>
